﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>快速创建项目</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        .project_details {
            margin-bottom: 15px;
        }
    </style>
</head>
<body style="background-color:#f0f0f0;">
    <div style="max-width:600px;margin:0 auto;padding:20px;background-color:#fff;height:100%;">
        <div style="text-align:right;">
            <button class="btn btn-success" onclick="init_template(this)">加载模板</button>
        </div>
        <div class="form-group">
            <label>项目名称</label>
            <input type="text" class="form-control" />
        </div>
        <div class="form-group">
            <label>保存到目录</label>
            <input type="text" class="form-control" />
        </div>
        <div class="form-group">
            <label>选择模板</label>
            <div>
                <div class="btn-group">
                    <span class="btn btn-success" data-template="adminapi" onclick="change_template(this)">后台系统-api</span>
                    <span class="btn btn-default" data-template="adminwebagile" onclick="change_template(this)">后台系统-web(agile)</span>
                    <span class="btn btn-default" data-template="adminwebvue" onclick="change_template(this)">后台系统-web(vue)</span>
                    <span class="btn btn-default" data-template="adminwebblazor" onclick="change_template(this)">后台系统-web(blazor)</span>
                    <span class="btn btn-default" data-template="exebrowser" onclick="change_template(this)">软件exe(浏览器)</span>
                    <span class="btn btn-default" data-template="exewpf" onclick="change_template(this)">软件exe(wpf)</span>
                </div>
            </div>
        </div>
        <div class="project_details" id="_div_details_adminapi" style="max-height:500px;overflow-y:auto;">
            <div class="well">
                <div class="form-group">
                    <label>命名空间</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="well">
                <div class="form-group">
                    <label>数据库类型</label>
                    <div>
                        <div class="btn-group">
                            <span class="btn btn-success" data-database="mysql" onclick="change_database(this)">mysql</span>
                            <span class="btn btn-default" data-database="sql" onclick="change_database(this)">sql server</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>数据库地址或ip</label>
                    <input type="text" class="form-control" value="localhost" />
                </div>
                <div class="form-group">
                    <label>数据库端口</label>
                    <input type="text" class="form-control" value="3306" />
                </div>
                <div class="form-group">
                    <label>数据库初始库</label>
                    <input type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label>数据库用户名</label>
                    <input type="text" class="form-control" />
                </div>
                <div class="form-group">
                    <label>数据库密码</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="well">
                <div class="form-group">
                    <label>Redis ip</label>
                    <input type="text" class="form-control" value="127.0.0.1" />
                </div>
                <div class="form-group">
                    <label>Redis 端口</label>
                    <input type="text" class="form-control" value="6379" />
                </div>
                <div class="form-group">
                    <label>Redis 密码</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="well">
                <div class="form-group">
                    <label>文件服务地址</label>
                    <input type="text" class="form-control" value="" />
                </div>
            </div>
        </div>
        <div class="form-group project_details" id="_div_details_adminwebagile" style="display:none;">
            <div class="well">
                <div class="form-group">
                    <label>api 地址</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
        </div>
        <div class="form-group project_details" id="_div_details_adminwebvue" style="display:none;">
            <div class="well">
                <div class="form-group">
                    <label>api 地址</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
        </div>
        <div class="form-group project_details" id="_div_details_adminwebblazor" style="display:none;">
            <div class="well">
                <div class="form-group">
                    <label>api 地址</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
        </div>
        <div class="form-group project_details" id="_div_details_exebrowser" style="display:none;">
        </div>
        <div class="form-group project_details" id="_div_details_exewpf" style="display:none;">
        </div>
        <div class="form-group">
            <button class="btn btn-success" onclick="create_project(this)">创建项目</button>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        var _model = {
            template: 'adminapi',
            database: 'mysql'
        };

        function change_template(sender) {
            $(sender).siblings().removeClass('btn-success').addClass('btn-default');
            $(sender).removeClass('btn-default').addClass('btn-success');

            var template = $(sender).attr('data-template');
            _model.template = template;

            switch (_model.template) {
                case 'adminapi': {
                    $('.project_details').hide();
                    $('#_div_details_adminapi').show();
                    break;
                }
                case 'adminwebagile': {
                    $('.project_details').hide();
                    $('#_div_details_adminwebagile').show();
                    break;
                }
                case 'adminwebvue': {
                    $('.project_details').hide();
                    $('#_div_details_adminwebvue').show();
                    break;
                }
                case 'adminwebblazor': {
                    $('.project_details').hide();
                    $('#_div_details_adminwebblazor').show();
                    break;
                }
                case 'exebrowser': {
                    $('.project_details').hide();
                    $('#_div_details_exebrowser').show();
                    break;
                }
                case 'exewpf': {
                    $('.project_details').hide();
                    $('#_div_details_exewpf').show();
                    break;
                }
            }
        }

        function change_database(sender) {
            $(sender).siblings().removeClass('btn-success').addClass('btn-default');
            $(sender).removeClass('btn-default').addClass('btn-success');

            var database = $(sender).attr('data-database');
            _model.database = database;
        }

        function create_project(sender) {
            $.ajax({
                url: '/create',
                type: 'POST',
                dataType: 'json',
                success: function (rsp) { },
                fail: function () {
                }
            });
        }

        function init_template(sender) {
            $.ajax({
                url: '/init',
                type: 'POST',
                dataType: 'json',
                success: function (rsp) { },
                fail: function () {
                }
            });
        }
    </script>
</body>
</html>